<template>
	<view>
		<!--顶部S-->
		<view class="top-box tp-ptb0lr30 tp-bbox  center_combo tp-h88">
			<view class="tp-w690">
				<uni-search-bar radius="100" placeholder="请输入关键字" bgColor="#fff" @cancel="search" @clear="search" @confirm="search" />
			</view>
		</view>
		<!--顶部E-->
		<!--筛选S-->
		<view class="shaixuan-box tp-h88 tp-bgf level_align tp-bbox flex_between tp-fc333 tp-fz28 tp-ptb0lr30 tp-pr">
			<view class="level_align tp-h100" @click="showChange(0)" :style="{color: showIndex == 0 ? '#00B4FF': ''}">
				<text class="tp-mr15">{{travelType.value == '全部' || !travelType.value  ?'类别' : travelType.value }}</text>
				<image v-show="showIndex != 0" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 0" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(1)" :style="{color: showIndex == 1 ? '#00B4FF': ''}">
				<text class="tp-mr15">景区</text>
				<image v-show="showIndex != 1" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 1" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(2)" :style="{color: showIndex == 2 ? '#00B4FF': ''}">
				<text class="tp-mr15">排序</text>
				<image v-show="showIndex != 2" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 2" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(3)" :style="{color: showIndex == 3 ? '#00B4FF': ''}">
				<text class="tp-mr15">天数</text>
				<image v-show="showIndex != 3" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 3" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<image @click="isHang = !isHang" v-if="isHang" class="tp-img36" src="../static/icon/heng.png" mode=""></image>
			<image @click="isHang = !isHang" v-if="!isHang" class="tp-img36" src="../static/icon/kuai.png" mode=""></image>
		</view>
		<!--筛选E-->

		<!-- 筛选的弹框 S -->
		<uni-popup id="popup" ref="popup" type="top" :animation="false" @change="filtratePopup">
			<view class="popup-content tp-bgf  tp-w100" style="top: 176rpx;position: fixed;border-top: 2rpx solid #e6e6e6">
				<!-- 类别 S -->
				<view v-if="showIndex == 0" class="tp-h88 tp-w100 level_align tp-bgf tp-ptb0lr30 tp-bdbm tp-fc333 tp-fz30" v-for="(item,index) in traveType"
				 :key="index" @click="selectTrave(item)">
					{{item.value}}
				</view>
				<!-- 类别 E -->
				<!-- 景区 S -->
				<view class="tp-bgf flex_between flex tp-pt40 tp-pb30 tp-bdbm" v-if="showIndex == 1">
					<view class="search_v level_align tp-bgf">
						<image class="tp-img28 tp-mr15" src="../../static/imgs/icons/search-icon.png" mode=""></image>
						<input class="flex-1" type="text" :value="scenicSearch" placeholder="请输入关键字" @input="ScenicSearchFn" @cancel="ScenicSearchFn"
						 @clear="ScenicSearchFn" @confirm="ScenicSearchFn">
					</view>
				</view>
				<scroll-view v-if="showIndex == 1" scroll-y="true" class="" style="height: 50vh;" enable-back-to-top @scrolltolower="handleScrolltolower(item,index)">
					<view class="">
						<view class="tp-h88 tp-w100 level_align flex_between tp-bgf tp-ptb0lr30 tp-bbox tp-bdbm tp-fc333 tp-fz30" v-for="(item,index) in showScenicList"
						 :key="index" @click="selectScenic(item)">
							<text>{{item.label}}</text>
							<uni-icons v-if="item.choosed" type="checkmarkempty" size="40" color="#00B4FF"></uni-icons>
						</view>
					</view>
				</scroll-view>
				<view class="area-bottom center_combo" v-if="showIndex == 1">
					<view @click="filtratePopupClose(1)" class="btn tp-mr30 tp-bcF5 tp-fc999 center_combo">
						取消
					</view>
					<view @click="areaSearch(1)" class="btn tp-bc tp-fcF center_combo">
						确定
					</view>
				</view>
				<!-- 景区 E -->
				<!-- 排序 S -->
				<view class="" v-if="showIndex == 2">
					<view class="tp-h88 tp-w100 level_align flex_between tp-bgf tp-ptb0lr30 tp-bbox tp-bdbm tp-fc333 tp-fz30" @click="changeOrderByTypeEnum('SCORE')">
						<text>评分最高</text>
						<uni-icons v-if="orderByTypeEnum == 'SCORE'" type="checkmarkempty" size="40" color="#00B4FF"></uni-icons>
					</view>
					<view class="tp-h88 tp-w100 level_align flex_between tp-bgf tp-ptb0lr30 tp-bbox tp-bdbm tp-fc333 tp-fz30" @click="changeOrderByTypeEnum('SALE')">
						<text>销量最高</text>
						<uni-icons v-if="orderByTypeEnum == 'SALE'" type="checkmarkempty" size="40" color="#00B4FF"></uni-icons>
					</view>
					<view class="level_align tp-h64  tp-ptb0lr30">
						价格
					</view>
					<view class="price-box tp-ptb0lr30 tp-pb30">
						<view class="top level_align flex_around">
							<input type="number" value="" v-model="minPrice" placeholder="最低价" />
							<text class="tp-fc999">——</text>
							<input type="number" value="" v-model="maxPrice" placeholder="最高价" />
						</view>
					</view>
					<view class="area-bottom center_combo">
						<view @click="filtratePopupClose(2)" class="btn tp-mr30 tp-bcF5 tp-fc999 center_combo">
							取消
						</view>
						<view @click="areaSearch(2)" class="btn tp-bc tp-fcF center_combo">
							确定
						</view>
					</view>
				</view>
				<!-- 排序 E -->
				<!-- 天数 S -->
				<view class="" v-if="showIndex == 3">
					<view class="price-box tp-pd30">
						<view class="top level_align flex_around">
							<input type="number" value="" v-model="minDay" placeholder="请输入" />
							<text class="tp-fc999">——</text>
							<input type="number" value="" v-model="maxDay" placeholder="请输入" />
						</view>
					</view>
					<view class="area-bottom center_combo">
						<view @click="filtratePopupClose(3)" class="btn tp-mr30 tp-bcF5 tp-fc999 center_combo">
							取消
						</view>
						<view @click="areaSearch(3)" class="btn tp-bc tp-fcF center_combo">
							确定
						</view>
					</view>
				</view>
				<!-- 天数 E -->
			</view>
		</uni-popup>
		<!-- 筛选的弹框 E-->

		<!-- 列表 S -->
		<view class="list-box">
			<!-- 行布局 S -->
			<view v-if="isHang" class=" tp-ptb0lr30 tp-pt20 tp-pb20 level_align tp-bgf tp-mb2" @click="pageJumps('./travelDetail?id=' + item.id + '&title=' + item.travelName)"
			 v-for="(item,index) in list" :key="index">
				<view class="tp-pr tp-mr20">
					<image class="hang-img tp-br12" :src="wwwImgUrl + item.travelCover" mode=""></image>
					<!-- <text class="img-lable tp-fcF">{{item.travelTypes.length && item.travelTypes[0]}}</text> -->
					<text class="img-lable tp-fcF">{{ item.travelTypes && item.travelTypes.join('、')}}</text>
				</view>
				<view class="flex-1 hang-right flex flex_column flex_between">
					<view class="flex flex_column">
						<view class="ellispsis1 tp-fc333 tp-fw600">
							{{item.travelName}}
						</view>
						<view class="tp-mt20 level_align tp-w100 tp-ofh">
							<view class="quan-tag tp-bgf  tp-wsn tp-lh40 tp-mr10 tp-fc tp-border1 tp-br8  tp-fz22" v-for="(it,ind) in item.travelLabels"
							 :key="ind">
								{{it}}
							</view>
						</view>
					</view>
					<view class="level_align flex_between">
						<view class="flex align_baseline tp-red tp-fz24">
							￥<text class="tp-fz36">{{item.currentPrice}}</text>起
						</view>
						<view class="level_align tp-fz26 tp-fc999">
							<text class="tp-mr20">{{item.sales}}人已买</text>
							<text class="tp-yellow">{{item.travelScore}}分</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 行布局 E -->

			<!-- 块布局 S -->
			<view v-if="!isHang" class=" tp-ptb0lr30  level_align flex_between flex_wrap">
				<view class="tp-br12 tp-bs14 tp-bgf tp-mb20 tp-bsf5" style="width: 335rpx;" @click="pageJumps('./travelDetail?id=' + item.id + '&title=' + item.travelName)"
				 v-for="(item,index) in list" :key="index">
					<view class="tp-pr">
						<image class="kuai-img" :src="wwwImgUrl + item.travelCover" mode="aspectFill"></image>
						<!-- <text class="img-lable tp-fcF">跟团游</text> -->
						<text class="img-lable tp-fcF">{{ item.travelTypes && item.travelTypes.join('、')}}</text>
					</view>
					<view class="flex flex_column tp-ptb0lr20 tp-pb20">
						<view class="ellispsis2 tp-lh40 tp-fc333 tp-fz28 tp-fw600 tp-h80">
							{{item.travelName}}
						</view>
						<view class="tp-mt10 level_align tp-w100 tp-ofh">
							<view class="quan-tag tp-wsn tp-lh40 tp-mr10 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22" v-for="(it,ind) in item.travelLabels"
							 :key="ind">
								{{it}}
							</view>
						</view>
						<view class="level_align flex_between tp-mt10">
							<view class="tp-fz24 tp-fc999">
								{{item.sales}}人已买
							</view>
							<text class="tp-yellow">{{item.travelScore}}分</text>
						</view>
						<view class="tp-fz24 tp-red tp-fw600">
							￥<text class="tp-fz36">{{item.currentPrice}}</text>起
						</view>
					</view>

				</view>
			</view>
			<!-- 块布局 E -->

		</view>
		<!-- 列表 E -->

		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isHang: true, // 行排列true 还是 块false
				showIndex: 4, //  0位置区域 	1酒店类型 2排序	3筛选  4什么都不选
				traveType: [], // 类别的数据
				scenicList: [], // 景区列表
				showScenicList: [], // 展示的景区列表
				scenicSearch: '', // 搜索的景区

				nowCity: '', // 当前选择的城市
				travelType: {}, //旅游类别 字典 501 返回的id,单选
				minPrice: null, // 最低价格
				maxPrice: null, // 最高价格 
				minDay: null, // 最小天数
				maxDay: null, // 最大天数 
				orderByTypeEnum: null, // 评分最高 0 销量最高 1
				searchVal: '', // 搜索的内容

				list: [], // 页面列表
				scenicPageNum: 1, // 当前页码, 景区名称下拉分页
				scenicLast_page: null, // 总页数, 景区名称下拉分页
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		onLoad(opt) {
			this.searchVal = opt.searchVal && opt.searchVal
			this.getDictData(501)
			this.getScenicNameList()
			this.nowCity = this.$store.getters.getChangeNowCity
			this.getList()
			if (opt.searchVal && opt.searchVal) { // 如果是目的地搜索过来的，请求之后
				this.searchVal = ''
			}
		},
		onShow() {
			if (this.$store.getters.getChangeNowCity != this.nowCity) {
				this.nowCity = this.$store.getters.getChangeNowCity
				this.getList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.pageNum = 1
			this.list = []
			this.loadMoreText = "加载中..."
			this.getList()
		},
		// 上拉触底
		onReachBottom() {
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getList()
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			getList() {
				let arr = []
				this.scenicList.forEach(item => {
					if (item.choosed) {
						arr.push(item.value)
					}
				})
				let maxPrice = this.maxPrice,
					minPrice = this.minPrice,
					maxDay = this.maxDay,
					minDay = this.minDay;
				if (!maxPrice) {
					maxPrice = 100000
				}
				if (!minPrice) {
					minPrice = 0
				}
				if (!maxDay) {
					maxDay = 100000
				}
				if (!minDay) {
					minDay = 0
				}
				let param = {
					orderByTypeEnum: this.orderByTypeEnum,
					travelTypes: this.travelType.id && [this.travelType.id] || [],
					maxPrice: maxPrice,
					minPrice: minPrice,
					maxDay: maxDay,
					minDay: minDay,
					keyWords: this.searchVal,
					city: this.nowCity,
					jqIds: arr,
				}
				this.$http.post(this.$api.travelGroupList + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, param).then(
					res => {
						uni.stopPullDownRefresh();
						this.showLoadMore = false;
						if (res.code === 200) {
							this.last_page = res.data.pageTotal
							res.data.result.map(item => {
								let arr = item.travelLabels,
									brr = [];
								if (item.travelLabels && item.travelLabels.length && item.travelLabels.length > 3) {
									for (let i = 0; i < 2; i++) {
										brr.push(arr[i])
									}
									item.travelLabels = brr
								}
							})
							if (this.pageNum > 1) {
								this.list = this.list.concat(res.data.result);
							} else {
								this.list = res.data.result
							}
							if (this.searchVal) { // 如果是目的地搜索过来的，请求之后
								this.searchVal = ''
							}
						}
					})
			},
			// 各种下拉选项设置 500: 跟团游标签 501: 旅游类别
			getDictData(type) {
				this.$http.get(this.$api.dictData + '?type=' + type).then(res => {
					if (res.code === 200) {
						let obj = {
							value: '全部',
							id: null
						}
						this.traveType = res.data
						this.traveType.unshift(obj)
					}
				})
			},
			//检测input输入的内容
			ScenicSearchFn(e) {
				this.scenicSearch = e.detail.value.trim()
				let arr = []
				let strarr = this.scenicSearch.split('')
				this.scenicList.forEach((item) => { //jdlist是获取的数据列表 
					if (strarr.every(it => {
							return item.label.toLowerCase().indexOf(it.toLowerCase()) != -1 //是否存在输入的字符
						})) {
						arr.push(item) //把存在输入的字符的item存到新数组
						this.showScenicList = arr //newjdlist是页面展示的数据列表   
					}
				})
				if(!arr.length){   // 如果没有匹配的 就清空展示数组
					this.showScenicList = []
				}
				if (this.scenicSearch == '') {
					this.showScenicList = this.scenicList //清空输入框时,展示的数据列表复原
				}
			},
			// 获取下拉选择的景区列表
			getScenicNameList() {
				this.$http.get(this.$api.strategyjqIdNameList + '?pageSize=10&pageNum=' + this.scenicPageNum).then(res => {
					if (res.code === 200) {
						this.scenicLast_page = res.data.pageTotal
						res.data.result.map(item => {
							item.choosed = false
						})
						if (this.scenicPageNum > 1) {
							this.scenicList = this.scenicList.concat(res.data.result);
						} else {
							this.scenicList = res.data.result
						}
						this.showScenicList = this.scenicList
					}
				})
			},
			// 景区下拉 触底加载
			handleScrolltolower() {
				if (this.scenicPageNum < this.scenicLast_page) {
					this.scenicPageNum++
					this.getScenicNameList();
				}
			},
			// 切换评分
			changeOrderByTypeEnum(type) {
				if (this.orderByTypeEnum == type) {
					this.orderByTypeEnum = null
				} else {
					this.orderByTypeEnum = type
				}
			},
			// 搜索
			search(e) {
				console.log(e);
				this.searchVal = e.value
				this.pageNum = 1
				this.getList()
			},
			// 选择的切换
			showChange(ind) {
				this.showIndex = ind
				this.$refs.popup.open()
			},
			// 选择确定
			areaSearch(ind) {
				if (ind == 2) {
					if (this.minPrice && this.maxPrice && Number(this.minPrice) > Number(this.maxPrice)) {
						return uni.showToast({
							title: '请输入正确的价格区间',
							icon: 'none'
						})
					}
				}
				if (ind == 3) {
					if (this.minDay && this.maxDay && Number(this.minDay) > Number(this.maxDay)) {
						return uni.showToast({
							title: '请输入正确的天数区间',
							icon: 'none'
						})
					}
				}
				this.pageNum = 1
				this.showIndex = 4
				this.$refs.popup.close()
				this.getList()
			},
			// 筛选弹框显示隐藏改变
			filtratePopup(e) {
				if (!e.show) {
					this.showIndex = 4
				}
			},
			// 取消
			filtratePopupClose(index) {
				if (index == 1) {
					this.scenicList.forEach(item => {
						return item.choosed = false
					})
				}
				if (index == 2) {
					this.orderByTypeEnum = null
					this.maxPrice = ''
					this.minPrice = ''
				}
				if (index == 3) {
					this.maxDay = ''
					this.minDay = ''
				}
				this.showIndex = 4
				this.$refs.popup.close()
				this.getList()
			},
			// 选择旅游类型
			selectScenic(item) {
				return item.choosed = !item.choosed
			},
			// 选择旅游类型
			selectTrave(item) {
				this.travelType = item
				this.$refs.popup.close()
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		background: #00B4FF;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;

		/deep/ .uni-searchbar {
			height: 56rpx;
		}

		/deep/ .uni-searchbar__cancel {
			line-height: 56rpx;
		}

		/deep/ .uni-searchbar__cancel {
			color: #fff;
		}

	}

	.shaixuan-box {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 176rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;
	}

	.popup-content {
		.price-box {
			background: #FFFFFF;

			.top {
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					width: 280rpx;
					height: 64rpx;
					background: rgba(245, 245, 245, 1);
					border-radius: 8rpx;
					text-align: center;
				}

			}
		}

		.area-bottom {
			height: 120rpx;
			border-top: 2rpx solid #EBEBEB;

			.btn {
				width: 260rpx;
				height: 72rpx;
				border-radius: 36rpx;
			}
		}
	}

	.list-box {
		margin-top: 200rpx;

		.img-lable {
			position: absolute;
			top: 0;
			left: 0;
			padding: 6rpx;
			background: rgba(0, 0, 0, .3);
			color: rgba(255, 255, 255, .8);
			border-radius: 12rpx 0px 12rpx 0px;
		}

		.quan-tag {
			display: inline-block;
			padding: 0 6rpx;
			border-color: $tc;
		}

		.kuai-img {
			width: 335rpx;
			height: 200rpx;
			border-radius: 12rpx 12rpx 0px 0px;
		}

		.hang-img {
			width: 262rpx;
			height: 156rpx;
		}

		.hang-right {
			width: calc(100% - 262rpx - 20rpx);
			height: 156rpx;
		}
	}

	.search_v {
		width: 80%;
		margin: 0 auto;
		border: 2rpx solid #ededed;
		height: 56rpx;
		border-radius: 28rpx;
		padding-left: 30rpx;
	}
</style>
